<template>
    <view>
        <u-swiper
                :list="list6"
                @change="e => currentNum = e.current"
                :autoplay="false"
                indicatorStyle="right: 20px"
        >
            <view
                    slot="indicator"
                    class="indicator-num"
            >
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
            </view>
        </u-swiper>

        <view class="u-demo-block">
            <view style="height: 10px;padding: 5px 10px;">
                <span style="float: left">￥{{goods.price}}</span>
                <span style="float: right">已购买{{goods.buyCount}}{{goods.unit}}</span>
            </view>
            <view style="height:50px;line-height:50px;clear: both;font-size: 26px;padding: 5px 10px;font-weight: bold">
                {{goods.name}}
            </view>
        </view>
        <view style="height: 10px;padding: 5px 10px;">
            商品评价({{goods.commentCount}})
        </view>
        <view>
            <view v-for="comment in comments" style="margin: 15px;border-bottom: #a5a5a5 1px solid">
                <view style="color: #B2B2B2;font-size: 10px">{{comment.userName}}</view>
                <view>{{comment.comment}}</view>
            </view>
        </view>

        <view class="div8 u-demo-block">
            <view class="div8-1">
                <view>
                    <view class="ddiivv">
                        <u-icon style="display: inline-block;width: 50%;" name="chat"/>
                    </view>
                    <view>
                        客服
                    </view>
                </view>
                <view>
                    <view class="ddiivv">
                        <u-icon style="display: inline-block;width: 50%;" :name="star"/>
                    </view>
                    <view>
                        收藏
                    </view>
                </view>
            </view>
            <view class="div8-2" @click="open(1)">
                加入购物车
            </view>
            <view class="div8-3" @click="open(2)">
                立即购买
            </view>
        </view>

        <!--规格的弹窗-->
        <u-popup :show="show" mode="bottom"  @close="close">
            <view class="popView">
                <view>
                    ￥{{price}}
                </view>
                <view v-for="(m,index) in mallSpecsShow" style="margin: 10px">
                    {{index}}
                    <view style="margin: 10px">
                        <span v-for="n in m" :class="{span1:true,onCheck:sIndex[index]==n}"  @click="checkStyle(n,index)">
                            {{n}}
                        </span>
                    </view>
                </view>
                <u-number-box v-model="info.amount"  :min="1" :max="goods.quota>0?goods.quota:999999" integer @change="numberBox"
                    style="margin: 10px"
                ></u-number-box>
                <u-button type="warning" @click="goWhere" text="确认"></u-button>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import Request from '../../utils/request'
    export default {
        data() {
            return{
                userId:1,
                info:{
                    amount:1,
                },
                //star-fill
                star:'star',
                sIndex:{},
                s1:'',
                price:0,
                show:false,
                showFlag:false,
                goods:{
                    articleNo: "No.123",
                    brandId: 1,
                    brandName: "阿松大",
                    buyCount: 3,
                    commentCount: 2,
                    deleted: 0,
                    growth: 40,
                    guarantee: 1,
                    id: 1,
                    insertTime: "2022-07-05 20:08:53",
                    integral: 20,
                    introduce: null,
                    logistics: 1,
                    memberPrice: 850,
                    modifiedTime: "2022-07-11 08:31:25",
                    name: "锤子手机",
                    number: "123dasdas",
                    price: 860,
                    promotionEndTime: "2022-07-05 19:28:10",
                    promotionPrice: 40,
                    promotionStartTime: "2022-07-20 19:28:07",
                    promotionState: false,
                    quota: 2,
                    state: true,
                    stock: 1000,
                    stockWarning: null,
                    unit: "个"
                },
                mallSpecs:[],
                mallSpecsShow:{

                },
                checkSpecs:{},
                goFlag:0,
                comments:[],
                currentNum:0,
                goodsId:uni.getStorageSync('goodsId'),
                list6: [
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ]
            }
        },
        created(){
            this.getPhoneListByGoodsId()
            this.phoneGoodsById()
            this.phoneShowComment()
        },methods:{
            reload() {
                // 获取当前页面路由 具体请看该函数的实现
                const url = this.getPageUrl(1)
                uni.reLaunch({
                    url,
                    success: () => {
                        console.log('reload触发了!!!!!! url====>' + url)
                    }
                })
            },

            /*获取图片列表*/
            getPhoneListByGoodsId(){
                console.log(this.goodsId)
                Request.request('management-mall/leyou.mall/mall-goods-picture/getPhoneListByGoodsId'
                    ,{goodsId:this.goodsId},'post').then(res=>{
                    console.log(res)
                    this.list6=res.data.list
                }).catch(error=>{
                    console.error(error)
                })
            },
            /*获取商品*/
            phoneGoodsById(){
                Request.request('management-mall/leyou.mall/mall-goods/goodsDetail'
                    ,{goodsId:this.goodsId},'post').then(res=>{
                    console.log(res.data.data)
                    this.goods=res.data.data.mallGoodsDto
                    this.comments=res.data.data.commentDto
                }).catch(error=>{
                    console.error(error)
                })
            },
            /*获取评论*/
            phoneShowComment(){
                Request.request('management-mall/leyou.mall/mall-goods-comment/phoneShowComment'
                    ,{goodsId:this.goodsId,num:2},'post').then(res=>{
                    console.log(res)
                    //this.goods=res.data.data.mallGoodsDto
                }).catch(error=>{
                    console.error(error)
                })
            },
            /*获取规格列表*/
             async getListByGoodsId(){
                await Request.request('management-mall/leyou.mall/mall-specs/getListByGoodsId'
                    ,{goodsId:this.goodsId},'post').then(res=>{
                    console.log(res)
                    // console.log(res.data.specsList)
                    this.mallSpecs=res.data.list
                    this.mallSpecsShow=res.data.specsList
                }).catch(error=>{
                    console.error(error)
                })
            },
            /*弹出层的开关放啊*/
            async open(num){
                this.goFlag=num
                this.show=true
                if(this.showFlag){
                    return
                }
                this.showFlag=true
                await this.getListByGoodsId()
                /*处理数据*/
                console.log(this.mallSpecs)
            },
            /*加入购物车 或 立即购买*/
            goWhere(){
              // 1 为加入购物车 2 为立即购买
              if(this.goFlag==1){
                  let cart={
                      spuId:this.goodsId,
                      skuId:this.checkSpecs.skuId,
                      userId:this.userId,
                      amount:this.info.amount
                  }
                  console.log(cart)
                  //加入购物车的操作
                  Request.request('management-mall/leyou.order/order-shopping-cart/addCart'
                      ,cart,'post').then(res=>{
                      console.log(res)
                      if(res.success){
                          uni.showToast({
                              title:'已加入购物车'
                          })
                          this.reload()
                      }
                      // console.log(res.data.specsList)
                      //this.mallSpecs=res.data.list
                      //this.mallSpecsShow=res.data.specsList
                  }).catch(error=>{
                      console.error(error)
                  })
              }else if(this.goFlag==2){
                  //跳转立即购买
                  let cart={
                      spuId:this.goodsId,
                      skuId:this.checkSpecs.skuId,
                      userId:this.userId,
                      amount:this.info.amount
                  }
                  uni.setStorageSync("cart",cart)
                  uni.navigateTo({
                      url: '/pages/sjh/writeOrder'
                  });
              }
            },
            /*步进器*/
            numberBox(){
                //console.log(this.info.amount)
                if(this.info.amount==this.goods.quota-1){
                    console.log("66666")
                    uni.showToast({
                        icon:'error',
                        title:'每用户最多购买'+this.goods.quota+'个'
                    })
                }
            },
            close(){
                this.show=false
            },
            /*选中商品*/
            checkStyle(style,index){
                this.sIndex[index]=style
                this.mallSpecsShow=this.mallSpecsShow
                //alert(style)
                for(let i=0;i<this.mallSpecs.length;i++){
                    let tag=this.mallSpecs[i]
                    if(this.sIndex[tag.oneSpecs]==tag.oneStyle && this.sIndex[tag.twoSpecs]==tag.twoStyle && this.sIndex[tag.threeSpecs]==tag.threeStyle){
                        console.log(tag)
                        this.checkSpecs=tag
                        this.price=tag.price
                    }
                }

                this.show=false
                this.show=true
                // for(let i=0;i<this.mallSpecsShow[index];i++){
                //     console.log(this.mallSpecsShow[index][i])
                // }
            }

        }
    }
</script>

<style scoped>
    .div8{
        overflow: hidden;
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #e1f3d8;
    }
    .div8>view{
        display: inline-block;
        text-align: center;

    }
    .div8-1{
        width: 40%;
        vertical-align: bottom;
    }
    .div8-1>view{
        vertical-align: bottom;
        font-size: 10px;
        width: 50%;
        display: inline-block;
        text-align: center;
        margin-bottom: 6px;
    }
    .div8-2{
        background: #cf9236;
        width: 30%;
        color: whitesmoke;
        padding: 20px 0;
    }
    .div8-3{
        width: 30%;
        background: #ff0000;
        color: whitesmoke;
        padding: 20px 0;
    }
    .popView{
        padding: 10px;
    }
    .span1{
        margin-right: 20px;
        padding: 4px 10px;
        border-radius: 10px;
        background: #a5a5a5;
        color: whitesmoke;
    }
    .onCheck{
        background: #dd6161;
    }
    .ddiivv{
        display: inline-block;
        text-align: left;
    }
</style>
